﻿<div id="add-form">
    <div id='contactsList'>
        <table class='contactsEditor' data-bind="validationOptions: { insertMessages: false }">
            <tr>
                <th>Product name</th>
                <th>Price</th>
            </tr>
            <tbody data-bind="foreach: products">
                <tr>
                    <td>
                        <input type="text" data-bind='value: productName'/>
                        <small class="error" data-bind="validationMessage: productName"></small>
                        <div>
                            <a href='#' data-bind='click: $root.removeProduct'>Delete field</a>
                        </div>
                    </td>
                    <td>
                        <input type="text" data-bind='value: price'/>
                        <small class="error" data-bind="validationMessage: price"></small>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <p>
        <button class="small" data-bind='click: addProduct'>Add a product</button>
        <button class="small" data-bind='click: save, enable: products().length > 0'>Send to DB</button>
    </p>

    <textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>

    <div id="done-send"></div>
</div>
